<template>
    <div>
        <h3>----------teleport组件传送----------------</h3>
        <button @click="buffer.show = true">唤起弹窗</button>

        <!-- 将消息弹窗传送到body上 -->
        <Teleport to="body">
            <toastComp :buffer="buffer"></toastComp>
        </Teleport>

        <loadComp :buffer="buffer"></loadComp>
    </div>
</template>

<script>
import toastComp from "./toast.vue"
import loadComp from "./load.vue"
export default {
    components: {
        toastComp,
        loadComp
    },
    data() {
        return {
            buffer: {
                show: false
            }
        };
    }
};
</script>

<style scoped></style>
